<template>
  <div class="container" @click="handleGallaryClick">
      <div class="wrapper">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) in imgs" :key="index">
                <img
                    class="gallary-img"
                    :src="item"
                />
            </swiper-slide>
        <div class="swiper-pagination" slot="pagination">
        </div>
            </swiper>
      </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
        // 意思是我这个swiper插件只要监听到我这个元素或者父级元素发生了dom结构的改变的时候，会自动的自我刷新一次，通过这次自我刷新，就能解决swiper宽度计算问题
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
.container >>> .swiper-container
    overflow :inherit
.container
    display :flex
    flex-direction :column
    justify-content :center
    position :fixed
    z-index:99
    left:0
    right:0
    top:0
    bottom :0
    background :#000
    .wrapper
        height:0
        width:100%
        padding-bottom:100%
        .gallary-img
            width:100%
        .swiper-pagination
            color:#fff
            bottom:-1rem
</style>
